<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button v-on:click="counter += 1">Add 1</button>
        <p>{{ counter }}</p>

        <!-- 许多事件处理逻辑会更为复杂，v-on 接收一个需要调用的方法名称。 -->
        <button v-on:click="greet">Greet</button>

        <!-- 内联处理器中的方法 -->
        <!-- 可以在内联 JavaScript 语句中调用方法 -->
        <button v-on:click="say('hi')">Say hi</button>

        <!-- 在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法： -->
        <!-- （因为此处要两个参数，event 将在此处不可省略）-->
        <button v-on:click="warn('ahaha', $event)">
            Submit
        </button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                counter: 0,
                myName: 'enen'
            },
            methods: {
                greet: function (event) {
                    // `this` 在方法里指向当前 Vue 实例
                    console.log(this.myName) // => enen

                    // `event` 是原生 DOM 事件
                    if (event) {
                        console.log(event.target) // => <button>Greet</button>
                        console.log(event.target.tagName) // dom 元素名 => BUTTON
                    }
                },
                say: function (message) {
                    alert(message)
                },
                warn: function (message, event) {
                    // 访问原生事件对象
                    if (event) {
                        console.log(event.target.tagName) // dom 元素名 => BUTTON
                    }
                    alert(message)
                }
            }
        })

        // 也可以用 JavaScript 直接调用方法
        vm.greet()  // => enen

    </script>
</body>

</html>